import React, { useState, useEffect, useCallback } from "react"
import { connect } from "react-redux"
import { useNavigate } from "react-router-dom"
import { pinyin } from "pinyin-pro"
import { Image, Modal } from "antd"
import { ExclamationCircleOutlined } from "@ant-design/icons"

import "./Header.less"
import { reqWeather } from "../api"
import { formatDate } from "../utils/utils"
// import router from "../router"
import { logout } from "../store/actions"

// const Btn = lazy(() => import("./linekButton"))
const { confirm } = Modal
const mapStateToProps = (store) => store
const mapDispatchToProps = {
  logout,
}

function Header(props) {
  const [weather, setWeather] = useState("晴")
  const [time, setTime] = useState(formatDate(Date.now()))
  // const [titles, setTitles] = useState("首页")
  const [weatherimg, setWeatherimg] = useState(null)
  // https://api.map.baidu.com/images/weather/day/qing.png
  const navigate = useNavigate()
  // const location = useLocation().pathname.split("/")
  const { logout, menuTitle } = props
  // const getTitles = useCallback(() => {
  //   let str = ""
  //   router[1].children.forEach((item) => {
  //     if (item.path === location[location.length - 1]) {
  //       str = item.label
  //     } else if (item.children) {
  //       const cItem = item.children.find(
  //         (cItem) => cItem.path === location[location.length - 1]
  //       )
  //       if (cItem) {
  //         str = cItem.label
  //       }
  //     }
  //   })
  //   setTitles(str)
  // }, [location])
  const getWeather = useCallback(() => {
    reqWeather().then((res) => {
      setWeather(res.lives[0].weather)
      const str = pinyin(weather, { toneType: "none" })
      const hours = new Date().getHours()
      const dayNight = hours > 18 || hours < 6 ? "night" : "day"
      setWeatherimg(
        `https://api.map.baidu.com/images/weather/${dayNight}/${str}.png`
      )
    })
  }, [weather])
  useEffect(() => {
    if (!weatherimg) {
      getWeather()
    }
    // getTitles()
    const times = setInterval(() => setTime(formatDate(Date.now())), 1000)
    return () => clearInterval(times)
  }, [getWeather, weatherimg, weather])
  const logouts = useCallback(() => {
    confirm({
      title: "确定退出登录吗?",
      icon: <ExclamationCircleOutlined />,
      centered: true,
      cancelText: "取消",
      okText: "确定",
      onOk() {
        logout(navigate)
      },
      onCancel() {
        React.$message("未退出", "warn")
      },
    })
  }, [logout, navigate])
  return (
    <div className="header">
      <div className="header-top">
        <span>欢迎，admin</span>
        <span
          style={{ color: "#1da57a", marginRight: 0, cursor: "pointer" }}
          onClick={logouts}
        >
          退出
        </span>
      </div>
      <div className="header-bottom">
        <div className="header-left">{menuTitle}</div>
        <div className="header-right">
          <span>{time}</span>
          <Image preview={false} src={weatherimg} />
          <span>{weather}</span>
        </div>
      </div>
    </div>
  )
}
export default connect(mapStateToProps, mapDispatchToProps)(Header)
